<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站文章管理页面集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #6B7280;
      --light: #F9FAFB;
      --dark: #1F2937;
      --white: #FFFFFF;
      --success: #10B981;
      --danger: #EF4444;
      --border: #E5E7EB;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      
      /* 不同风格主题色 */
      --style1: #4F46E5; /* 优雅紫蓝 */
      --style2: #EC4899; /* 活力粉 */
      --style3: #0EA5E9; /* 专业蓝 */
      --style4: #10B981; /* 自然绿 */
      --style5: #F59E0B; /* 温暖橙 */
      --style6: #111827; /* 深邃黑 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: background-color 0.3s ease;
    }
    
    /* 主页面容器 */
    .article-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .article-page.active {
      display: flex;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 18px 20px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
      transition: all 0.3s ease;
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-back {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    
    .header-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 18px;
      cursor: pointer;
      margin-left: 15px;
      transition: color 0.3s ease;
    }
    
    /* 文章管理工具栏 */
    .article-toolbar {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
    }
    
    .toolbar-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    .create-btn {
      padding: 8px 16px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .create-btn i {
      margin-right: 6px;
    }
    
    /* 分类栏 */
    .category-bar {
      padding: 12px 20px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .category-tabs {
      display: flex;
      gap: 15px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 5px;
    }
    
    .category-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .category-tab {
      font-size: 15px;
      font-weight: 500;
      color: var(--secondary);
      cursor: pointer;
      white-space: nowrap;
    }
    
    .category-tab.active {
      color: var(--primary);
    }
    
    .category-btn {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 16px;
      cursor: pointer;
      flex-shrink: 0;
    }
    
    /* 文章列表 */
    .article-list {
      flex-grow: 1;
      overflow-y: auto;
    }
    
    .article-item {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .article-item:hover {
      background-color: var(--light);
    }
    
    .article-image {
      width: 100%;
      height: 180px;
      border-radius: 8px;
      object-fit: cover;
      margin-bottom: 12px;
    }
    
    .article-meta {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--secondary);
    }
    
    .article-category {
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      margin-right: 10px;
      background-color: rgba(79, 70, 229, 0.1);
      color: var(--primary);
    }
    
    .article-date {
      margin-right: 10px;
    }
    
    .article-stats {
      display: flex;
      align-items: center;
    }
    
    .stat-item {
      display: flex;
      align-items: center;
      margin-right: 15px;
    }
    
    .stat-item i {
      margin-right: 4px;
      font-size: 12px;
    }
    
    .article-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    
    .article-excerpt {
      font-size: 14px;
      color: var(--secondary);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 10px;
    }
    
    .article-actions {
      display: flex;
      justify-content: flex-end;
    }
    
    .action-btn {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 16px;
      cursor: pointer;
      margin-left: 15px;
    }
    
    /* 文章编辑区域 */
    .editor-container {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      padding: 15px 20px;
    }
    
    .editor-category {
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 15px;
      font-size: 14px;
      color: var(--dark);
      background-color: transparent;
    }
    
    .editor-title {
      width: 100%;
      padding: 12px 0;
      border: none;
      border-bottom: 1px solid var(--border);
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      background-color: transparent;
      color: var(--dark);
    }
    
    .editor-title::placeholder {
      color: var(--secondary);
    }
    
    .editor-content {
      flex-grow: 1;
      width: 100%;
      border: none;
      resize: none;
      font-size: 16px;
      line-height: 1.6;
      background-color: transparent;
      color: var(--dark);
    }
    
    .editor-content:focus, .editor-title:focus {
      outline: none;
    }
    
    .editor-image-upload {
      width: 100%;
      height: 180px;
      border: 1px dashed var(--border);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 15px 0;
      color: var(--secondary);
      cursor: pointer;
      transition: border-color 0.2s ease;
    }
    
    .editor-image-upload:hover {
      border-color: var(--primary);
    }
    
    .editor-toolbar {
      display: flex;
      padding: 10px 0;
      border-top: 1px solid var(--border);
      margin-top: 10px;
    }
    
    .editor-btn {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 18px;
      cursor: pointer;
      margin-right: 20px;
    }
    
    .editor-btn.primary {
      color: var(--primary);
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: var(--secondary);
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      opacity: 0.3;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 20px;
    }
    
    .empty-action {
      padding: 10px 20px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }
    
    .empty-action i {
      margin-right: 6px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
      transition: all 0.3s ease;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：优雅紫蓝 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .article-item {
      border-left: 3px solid transparent;
    }
    
    .style-1 .article-item:hover {
      border-left: 3px solid var(--primary);
    }
    
    .style-1 .category-tab.active {
      position: relative;
    }
    
    .style-1 .category-tab.active::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px;
    }
    
    /* 风格2：活力粉 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .page-header {
      background: linear-gradient(135deg, var(--primary), #F472B6);
      color: white;
      border-bottom: none;
      box-shadow: 0 2px 10px rgba(236, 72, 153, 0.2);
    }
    
    .style-2 .header-back,
    .style-2 .header-btn,
    .style-2 .page-title {
      color: white;
    }
    
    .style-2 .article-item {
      border-radius: 12px;
      margin: 10px 15px;
      padding: 15px;
      border-bottom: none;
      box-shadow: 0 2px 10px rgba(236, 72, 153, 0.05);
    }
    
    .style-2 .article-list {
      background-color: #FAFAFA;
      padding-top: 5px;
    }
    
    .style-2 .create-btn {
      border-radius: 20px;
      padding: 8px 20px;
      box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
    }
    
    /* 风格3：专业蓝 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .container {
      background-color: #F0F9FF;
    }
    
    .style-3 .article-toolbar, .style-3 .category-bar {
      background-color: white;
      margin: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(14, 165, 233, 0.08);
      border-bottom: none;
    }
    
    .style-3 .category-tab {
      background-color: rgba(14, 165, 233, 0.1);
      padding: 5px 15px;
      border-radius: 15px;
      font-size: 14px;
    }
    
    .style-3 .category-tab.active {
      background-color: var(--primary);
      color: white;
    }
    
    .style-3 .article-item {
      background-color: white;
      border-radius: 10px;
      margin: 0 15px 10px;
      border-bottom: none;
      box-shadow: 0 1px 3px rgba(14, 165, 233, 0.05);
    }
    
    /* 风格4：自然绿 */
    .style-4 {
      --primary: var(--style4);
    }
    
    .style-4 .article-image {
      border-radius: 16px;
      height: 160px;
    }
    
    .style-4 .article-title {
      font-size: 16px;
    }
    
    .style-4 .category-bar {
      border-bottom: none;
      padding: 10px 20px;
    }
    
    .style-4 .article-item {
      padding: 15px 20px 20px;
    }
    
    .style-4 .create-btn {
      background-color: transparent;
      color: var(--primary);
      border: 1.5px solid var(--primary);
      font-weight: 600;
    }
    
    .style-4 .article-category {
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--primary);
    }
    
    /* 风格5：温暖橙 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .article-toolbar {
      background-color: #FFFBEB;
      border-bottom: none;
    }
    
    .style-5 .article-item {
      display: flex;
      gap: 15px;
      padding: 15px 20px;
    }
    
    .style-5 .article-image {
      width: 100px;
      height: 100px;
      margin-bottom: 0;
      flex-shrink: 0;
    }
    
    .style-5 .article-content {
      flex-grow: 1;
    }
    
    .style-5 .article-excerpt {
      -webkit-line-clamp: 3;
    }
    
    .style-5 .category-tab.active {
      color: var(--primary);
      font-weight: 600;
    }
    
    .style-5 .editor-toolbar {
      background-color: #FFFBEB;
      border-radius: 8px;
      margin: 10px -5px 0;
      padding: 10px 15px;
    }
    
    /* 风格6：深邃黑 */
    .style-6 {
      --primary: #60A5FA;
      --secondary: #9CA3AF;
      --light: #1F2937;
      --dark: #F9FAFB;
      --white: #111827;
      --border: #374151;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .style-6 body {
      background-color: #030712;
    }
    
    .style-6 .container {
      background-color: var(--white);
    }
    
    .style-6 .page-header {
      background-color: var(--light);
      border-bottom-color: var(--border);
    }
    
    .style-6 .header-back,
    .style-6 .header-btn,
    .style-6 .page-title {
      color: var(--dark);
    }
    
    .style-6 .article-item {
      border-bottom-color: var(--border);
    }
    
    .style-6 .article-item:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
    
    .style-6 .article-category {
      background-color: rgba(96, 165, 250, 0.1);
      color: var(--primary);
    }
    
    .style-6 .style-switcher {
      background-color: var(--light);
    }
    
    .style-6 .switcher-header {
      border-bottom-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .switcher-option {
      color: var(--dark);
    }
    
    .style-6 .switcher-option:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .article-title {
        font-size: 16px;
      }
      
      .create-btn span {
        display: none;
      }
      
      .create-btn i {
        margin-right: 0;
      }
      
      .style-5 .article-image {
        width: 80px;
        height: 80px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择文章管理样式</div>
    <div class="switcher-option active" data-style="1">优雅紫蓝</div>
    <div class="switcher-option" data-style="2">活力粉</div>
    <div class="switcher-option" data-style="3">专业蓝</div>
    <div class="switcher-option" data-style="4">自然绿</div>
    <div class="switcher-option" data-style="5">温暖橙</div>
    <div class="switcher-option" data-style="6">深邃黑</div>
  </div>
  
  <div class="container">
    <!-- 风格1：优雅紫蓝 - 文章管理列表 -->
    <div class="article-page active" id="page1">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">我的文章</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-search"></i></button>
          <button class="header-btn"><i class="fa fa-cog"></i></button>
        </div>
      </div>
      
      <div class="article-toolbar">
        <div class="toolbar-title">全部文章</div>
        <button class="create-btn">
          <i class="fa fa-pencil"></i>
          <span>写文章</span>
        </button>
      </div>
      
      <div class="category-bar">
        <div class="category-tabs">
          <div class="category-tab active">全部</div>
          <div class="category-tab">科技</div>
          <div class="category-tab">生活</div>
          <div class="category-tab">旅行</div>
          <div class="category-tab">美食</div>
          <div class="category-tab">职场</div>
        </div>
        <button class="category-btn"><i class="fa fa-filter"></i></button>
      </div>
      
      <div class="article-list">
        <div class="article-item">
          <img src="https://picsum.photos/id/24/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">科技</span>
            <span class="article-date">2023-06-15</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 1.2k</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 32</span>
              <span class="stat-item"><i class="fa fa-heart"></i> 89</span>
            </div>
          </div>
          <h3 class="article-title">2023年最值得关注的5项科技创新趋势</h3>
          <p class="article-excerpt">随着人工智能、区块链和物联网技术的快速发展，我们的生活正在发生翻天覆地的变化。本文将深入分析今年最有可能改变世界的五项科技创新...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
            <button class="action-btn"><i class="fa fa-trash"></i></button>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/42/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">旅行</span>
            <span class="article-date">2023-06-10</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 2.5k</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 56</span>
              <span class="stat-item"><i class="fa fa-heart"></i> 143</span>
            </div>
          </div>
          <h3 class="article-title">隐藏在城市角落的8个小众旅行目的地</h3>
          <p class="article-excerpt">厌倦了人满为患的热门景点？本文为你推荐8个鲜为人知但风景绝美的小众旅行地，让你的假期既安静又充满惊喜...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
            <button class="action-btn"><i class="fa fa-trash"></i></button>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/292/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">生活</span>
            <span class="article-date">2023-06-05</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 956</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 24</span>
              <span class="stat-item"><i class="fa fa-heart"></i> 76</span>
            </div>
          </div>
          <h3 class="article-title">10个简单有效的居家收纳技巧</h3>
          <p class="article-excerpt">小户型也能拥有大空间！这些实用的收纳技巧可以帮助你最大化利用家居空间，让家里既整洁又舒适，告别杂乱无章的生活环境...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
            <button class="action-btn"><i class="fa fa-trash"></i></button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：活力粉 - 文章编辑页面 -->
    <div class="article-page" id="page2">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">编辑文章</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-preview"></i></button>
          <button class="header-btn"><i class="fa fa-check"></i></button>
        </div>
      </div>
      
      <div class="editor-container">
        <select class="editor-category">
          <option>选择分类</option>
          <option selected>时尚</option>
          <option>美妆</option>
          <option>生活</option>
          <option>旅行</option>
          <option>美食</option>
        </select>
        
        <input type="text" class="editor-title" placeholder="请输入文章标题..." value="2023夏季时尚穿搭指南：轻松打造百变造型">
        
        <div class="editor-image-upload">
          <i class="fa fa-cloud-upload fa-2x"></i>
        </div>
        
        <textarea class="editor-content" placeholder="请输入文章内容...">
夏季来临，如何在炎热天气中保持时尚感？本文将为你介绍今年夏季最流行的搭配趋势和实用技巧，让你轻松应对各种场合。

### 一、色彩搭配原则
今年夏季的流行色以明亮轻快为主，珊瑚橙、天空蓝和薄荷绿成为时尚博主们的最爱。这些色彩不仅能带来愉悦的视觉感受，还能在阳光下显得格外有活力。

搭配技巧：
- 亮色+中性色：如珊瑚橙上衣搭配白色阔腿裤
- 同色系渐变：不同深浅的蓝色搭配，层次感十足
- 小面积撞色：用亮色配饰点缀整体造型

### 二、必备单品推荐
1. 宽松衬衫：既能防晒又能打造随性风格
2. 高腰短裤：显腿长的神器，搭配任何上衣都好看
3. 透气连衣裙：舒适又优雅，适合多种场合
4. 帆布鞋：时尚百搭，走路不累脚

### 三、不同场合穿搭建议
- 日常通勤：简约衬衫+直筒裤+低跟鞋
- 周末出游：T恤+牛仔短裤+运动鞋+草帽
- 约会聚餐：连衣裙+高跟鞋+小挎包

夏季穿搭的关键是在保持舒适的同时兼顾时尚感，选择透气面料和适合自己的风格最重要。希望这些建议能帮助你在这个夏天焕发新的光彩！
        </textarea>
        
        <div class="editor-toolbar">
          <button class="editor-btn"><i class="fa fa-image"></i></button>
          <button class="editor-btn"><i class="fa fa-header"></i></button>
          <button class="editor-btn"><i class="fa fa-bold"></i></button>
          <button class="editor-btn"><i class="fa fa-italic"></i></button>
          <button class="editor-btn"><i class="fa fa-list-ul"></i></button>
          <button class="editor-btn"><i class="fa fa-link"></i></button>
          <button class="editor-btn primary"><i class="fa fa-tag"></i></button>
        </div>
      </div>
    </div>
    
    <!-- 风格3：专业蓝 - 自媒体文章管理 -->
    <div class="article-page" id="page3">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">自媒体管理</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-bar-chart"></i></button>
        </div>
      </div>
      
      <div class="article-toolbar">
        <div class="toolbar-title">内容管理</div>
        <button class="create-btn">
          <i class="fa fa-plus"></i>
          <span>发布</span>
        </button>
      </div>
      
      <div class="category-bar">
        <div class="category-tabs">
          <div class="category-tab active">全部内容</div>
          <div class="category-tab">已发布</div>
          <div class="category-tab">草稿</div>
          <div class="category-tab">待审核</div>
          <div class="category-tab">已下架</div>
        </div>
        <button class="category-btn"><i class="fa fa-calendar"></i></button>
      </div>
      
      <div class="article-list">
        <div class="article-item">
          <img src="https://picsum.photos/id/180/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">职场</span>
            <span class="article-date">2023-06-18</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 5.3k</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 128</span>
              <span class="stat-item"><i class="fa fa-share"></i> 94</span>
            </div>
          </div>
          <h3 class="article-title">职场新人必看：如何快速适应工作环境</h3>
          <p class="article-excerpt">刚进入新公司的你是否感到迷茫？本文总结了10个实用技巧，帮助职场新人快速融入团队，建立良好的人际关系，提高工作效率...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-line-chart"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/366/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">财经</span>
            <span class="article-date">2023-06-12</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 3.7k</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 89</span>
              <span class="stat-item"><i class="fa fa-share"></i> 65</span>
            </div>
          </div>
          <h3 class="article-title">年轻人的第一堂理财课：从月光族到储蓄达人</h3>
          <p class="article-excerpt">工资不多也能存钱？本文将教你如何合理规划收入与支出，养成良好的消费习惯，即使是刚入职场的年轻人也能轻松积累第一桶金...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-line-chart"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/48/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">教育</span>
            <span class="article-date">草稿</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-clock-o"></i> 上次编辑: 3天前</span>
            </div>
          </div>
          <h3 class="article-title">如何培养孩子的自主学习能力</h3>
          <p class="article-excerpt">自主学习能力是孩子成长过程中最重要的技能之一。本文将分享几位教育专家的建议，帮助家长引导孩子养成主动学习的习惯，提高学习效率...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-eye"></i></button>
            <button class="action-btn"><i class="fa fa-trash"></i></button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格4：自然绿 - 生活类文章管理 -->
    <div class="article-page" id="page4">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">生活日记</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-star-o"></i></button>
        </div>
      </div>
      
      <div class="article-toolbar">
        <div class="toolbar-title">我的生活记录</div>
        <button class="create-btn">
          <i class="fa fa-plus"></i>
          <span>添加</span>
        </button>
      </div>
      
      <div class="category-bar">
        <div class="category-tabs">
          <div class="category-tab active">全部</div>
          <div class="category-tab">日常</div>
          <div class="category-tab">美食</div>
          <div class="category-tab">园艺</div>
          <div class="category-tab">手工</div>
          <div class="category-tab">宠物</div>
        </div>
        <button class="category-btn"><i class="fa fa-sort-amount-desc"></i></button>
      </div>
      
      <div class="article-list">
        <div class="article-item">
          <img src="https://picsum.photos/id/493/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">美食</span>
            <span class="article-date">今天 09:45</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-heart"></i> 24</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 8</span>
            </div>
          </div>
          <h3 class="article-title">周末早餐：健康燕麦碗的5种做法</h3>
          <p class="article-excerpt">简单又营养的燕麦碗是周末早餐的绝佳选择！分享5种不同口味的搭配方法，从经典水果到咸香培根，总有一款适合你...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
            <button class="action-btn"><i class="fa fa-bookmark-o"></i></button>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/118/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">园艺</span>
            <span class="article-date">昨天 16:20</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-heart"></i> 37</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 12</span>
            </div>
          </div>
          <h3 class="article-title">阳台小菜园：初学者也能种好的5种蔬菜</h3>
          <p class="article-excerpt">想在阳台种点蔬菜却不知道从何下手？这5种蔬菜生长周期短、易养护，非常适合园艺新手尝试，让你轻松收获自己种的新鲜蔬菜...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
            <button class="action-btn"><i class="fa fa-bookmark-o"></i></button>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/169/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">宠物</span>
            <span class="article-date">2023-06-17</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-heart"></i> 56</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 18</span>
            </div>
          </div>
          <h3 class="article-title">猫咪行为解读：你家猫主子想对你说什么</h3>
          <p class="article-excerpt">猫咪的每一个动作都有其特殊含义，了解这些行为背后的信号能帮助你更好地与猫咪沟通。本文解读了猫咪常见的10种行为及其含义...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
            <button class="action-btn"><i class="fa fa-bookmark-o"></i></button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格5：温暖橙 - 旅行文章管理 -->
    <div class="article-page" id="page5">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">旅行笔记</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-map-marker"></i></button>
        </div>
      </div>
      
      <div class="article-toolbar">
        <div class="toolbar-title">我的旅行故事</div>
        <button class="create-btn">
          <i class="fa fa-pencil"></i>
          <span>记录</span>
        </button>
      </div>
      
      <div class="category-bar">
        <div class="category-tabs">
          <div class="category-tab active">全部旅程</div>
          <div class="category-tab">国内</div>
          <div class="category-tab">国外</div>
          <div class="category-tab">城市</div>
          <div class="category-tab">自然</div>
          <div class="category-tab">美食</div>
        </div>
        <button class="category-btn"><i class="fa fa-calendar"></i></button>
      </div>
      
      <div class="article-list">
        <div class="article-item">
          <img src="https://picsum.photos/id/1036/300/300" alt="文章封面" class="article-image">
          <div class="article-content">
            <div class="article-meta">
              <span class="article-category">自然</span>
              <span class="article-date">2023-06-01</span>
            </div>
            <h3 class="article-title">徒步虎跳峡：挑战自我的3天2夜</h3>
            <p class="article-excerpt">虎跳峡徒步路线被称为"世界上最美的徒步路线之一"，本文记录了我3天2夜的徒步经历，包括路线选择、装备准备和沿途美景...</p>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 1.8k</span>
              <span class="stat-item"><i class="fa fa-heart"></i> 124</span>
            </div>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/1031/300/300" alt="文章封面" class="article-image">
          <div class="article-content">
            <div class="article-meta">
              <span class="article-category">城市</span>
              <span class="article-date">2023-05-20</span>
            </div>
            <h3 class="article-title">上海小众玩法：避开人潮的城市探索</h3>
            <p class="article-excerpt">除了外滩和迪士尼，上海还有很多值得探索的小众景点。本文推荐了5个本地人才知道的好去处，让你体验不一样的上海风情...</p>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 2.3k</span>
              <span class="stat-item"><i class="fa fa-heart"></i> 98</span>
            </div>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/1061/300/300" alt="文章封面" class="article-image">
          <div class="article-content">
            <div class="article-meta">
              <span class="article-category">国外</span>
              <span class="article-date">2023-05-05</span>
            </div>
            <h3 class="article-title">日本京都7日游：古都的四季之美</h3>
            <p class="article-excerpt">京都的每个季节都有其独特的魅力，本文分享了京都7日深度游的行程安排，包括寺庙参观、美食推荐和交通指南...</p>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 3.5k</span>
              <span class="stat-item"><i class="fa fa-heart"></i> 215</span>
            </div>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/292/300/300" alt="文章封面" class="article-image">
          <div class="article-content">
            <div class="article-meta">
              <span class="article-category">美食</span>
              <span class="article-date">草稿</span>
            </div>
            <h3 class="article-title">广州美食地图：从早茶到宵夜的味蕾之旅</h3>
            <p class="article-excerpt">广州是中国的美食之都，本文整理了从早茶到宵夜的完整美食攻略，包括必吃餐厅推荐、特色小吃介绍和点餐技巧...</p>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-clock-o"></i> 未完成</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格6：深邃黑 - 专业文章管理 -->
    <div class="article-page" id="page6">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">专业专栏</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-trophy"></i></button>
        </div>
      </div>
      
      <div class="article-toolbar">
        <div class="toolbar-title">我的专栏文章</div>
        <button class="create-btn">
          <i class="fa fa-plus"></i>
          <span>撰写</span>
        </button>
      </div>
      
      <div class="category-bar">
        <div class="category-tabs">
          <div class="category-tab active">全部文章</div>
          <div class="category-tab">技术</div>
          <div class="category-tab">设计</div>
          <div class="category-tab">产品</div>
          <div class="category-tab">运营</div>
          <div class="category-tab">管理</div>
        </div>
        <button class="category-btn"><i class="fa fa-filter"></i></button>
      </div>
      
      <div class="article-list">
        <div class="article-item">
          <img src="https://picsum.photos/id/0/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">技术</span>
            <span class="article-date">2023-06-20</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 8.7k</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 215</span>
              <span class="stat-item"><i class="fa fa-bookmark"></i> 1.2k</span>
            </div>
          </div>
          <h3 class="article-title">前端性能优化指南：从理论到实践</h3>
          <p class="article-excerpt">本文深入探讨了前端性能优化的核心原则和实践方法，包括资源加载优化、渲染性能提升和代码层面的优化技巧，附实际案例分析...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-chart-line"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/160/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">设计</span>
            <span class="article-date">2023-06-15</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 6.3k</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 156</span>
              <span class="stat-item"><i class="fa fa-bookmark"></i> 892</span>
            </div>
          </div>
          <h3 class="article-title">交互设计中的心理学：如何提升用户体验</h3>
          <p class="article-excerpt">优秀的交互设计不仅要美观，更要符合用户的心理预期。本文结合认知心理学原理，分析如何设计出更符合用户行为习惯的交互界面...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-chart-line"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
        
        <div class="article-item">
          <img src="https://picsum.photos/id/119/800/400" alt="文章封面" class="article-image">
          <div class="article-meta">
            <span class="article-category">产品</span>
            <span class="article-date">2023-06-10</span>
            <div class="article-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 4.9k</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 132</span>
              <span class="stat-item"><i class="fa fa-bookmark"></i> 754</span>
            </div>
          </div>
          <h3 class="article-title">从0到1：产品经理的需求分析方法论</h3>
          <p class="article-excerpt">需求分析是产品经理的核心技能之一。本文分享了一套完整的需求分析方法论，包括用户研究、需求挖掘、优先级排序和需求文档撰写...</p>
          <div class="article-actions">
            <button class="action-btn"><i class="fa fa-edit"></i></button>
            <button class="action-btn"><i class="fa fa-chart-line"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const articlePages = {
      1: document.getElementById('page1'),
      2: document.getElementById('page2'),
      3: document.getElementById('page3'),
      4: document.getElementById('page4'),
      5: document.getElementById('page5'),
      6: document.getElementById('page6')
    };
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 初始化分类标签
      initCategoryTabs();
      
      // 初始化文章项点击
      initArticleItems();
      
      // 初始化按钮事件
      initButtons();
    }
    
    // 初始化分类标签切换
    function initCategoryTabs() {
      document.querySelectorAll('.category-tab').forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除同组所有标签的active类
          const tabContainer = this.parentElement;
          tabContainer.querySelectorAll('.category-tab').forEach(item => {
            item.classList.remove('active');
          });
          
          // 给当前点击的标签添加active类
          this.classList.add('active');
        });
      });
    }
    
    // 初始化文章项点击事件
    function initArticleItems() {
      document.querySelectorAll('.article-item').forEach(item => {
        item.addEventListener('click', function(e) {
          // 如果点击的是按钮，则不触发文章项点击事件
          if (e.target.closest('.action-btn')) {
            return;
          }
          
          const title = this.querySelector('.article-title').textContent;
          alert(`查看文章：${title}`);
        });
      });
    }
    
    // 初始化按钮事件
    function initButtons() {
      // 返回按钮
      document.querySelectorAll('.header-back').forEach(button => {
        button.addEventListener('click', function() {
          alert('返回上一页');
        });
      });
      
      // 创建/发布按钮
      document.querySelectorAll('.create-btn, .header-btn .fa-check, .empty-action').forEach(button => {
        button.addEventListener('click', function() {
          alert('创建新文章');
        });
      });
      
      // 编辑按钮
      document.querySelectorAll('.action-btn .fa-edit, .action-btn .fa-pencil').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
          e.stopPropagation();
          const title = this.closest('.article-item').querySelector('.article-title').textContent;
          alert(`编辑文章：${title}`);
        });
      });
      
      // 删除按钮
      document.querySelectorAll('.action-btn .fa-trash').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
          e.stopPropagation();
          const title = this.closest('.article-item').querySelector('.article-title').textContent;
          if (confirm(`确定要删除文章 "${title}" 吗？`)) {
            alert('文章已删除');
          }
        });
      });
      
      // 分享按钮
      document.querySelectorAll('.action-btn .fa-share, .action-btn .fa-share-alt').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
          e.stopPropagation();
          const title = this.closest('.article-item').querySelector('.article-title').textContent;
          alert(`分享文章：${title}`);
        });
      });
      
      // 统计按钮
      document.querySelectorAll('.action-btn .fa-line-chart, .action-btn .fa-chart-line').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
          e.stopPropagation();
          const title = this.closest('.article-item').querySelector('.article-title').textContent;
          alert(`查看文章数据：${title}`);
        });
      });
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(articlePages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 显示对应页面
      closeAllPages();
      articlePages[style].classList.add('active');
    }
    
    // 键盘导航
    document.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowLeft') {
        let prev = currentStyle - 1;
        if (prev < 1) prev = 6;
        switchStyle(prev);
      } else if (e.key === 'ArrowRight') {
        let next = currentStyle + 1;
        if (next > 6) next = 1;
        switchStyle(next);
      }
    });
    
    // 启动
    init();
  </script>
</body>
</html>
